<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <style>
        .layui-input {
            width: 85%;
        }
    </style>
</head>

<body>
    <table id="demo" lay-filter="test"></table>

    <div id="add-student-form" style="display: none;">
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" id="student_name" required  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">年龄</label>
            <div class="layui-input-block">
                <input type="text" id="age" required  lay-verify="required" placeholder="请输入年龄" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="text" id="sex" required  lay-verify="required" placeholder="请输入性别" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">身份证号码</label>
            <div class="layui-input-block">
                <input type="text" id="id-card-num" required  lay-verify="required" placeholder="请输入身份证号码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">联系电话</label>
            <div class="layui-input-block">
                <input type="text" id="phone-number" required  lay-verify="required" placeholder="请输入联系电话" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div style="text-align: center;margin-bottom: 10px;">
            <button type="button" class="layui-btn" id="student-info-submit">提交</button>
        </div>
    </div>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="addStudent">添加</button>
        </div>
    </script>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <script src="../layui/layui.js"></script>
    <script src="../js/jquery-3.4.1.js"></script>
    <script>
        layui.use('table', function () {
            var table = layui.table;

            //第一个实例
            table.render({
                elem: '#demo'
                , height: 450
                , toolbar: '#toolbarDemo'
                , url: 'http://120.78.172.212:7001/api/v1/student/index/chenliangji' //数据接口
                , method: 'post'
                , page: true //开启分页
                , cols: [[ //表头
                    { field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left' }
                    , { field: 'student_name', title: '姓名', width: 80 }
                    , { field: 'age', title: '年龄', width: 80, sort: true }
                    , { field: 'sex', title: '性别', width: 80 }
                    , { field: 'id_card_num', title: '身份证号码', width: 177 }
                    , { field: 'phone_number', title: '联系电话', width: 180, sort: true }
                    , {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
                ]]
            });

            //头工具栏事件
            table.on('toolbar(test)', function (obj) {
                console.log(obj)
                switch (obj.event) {
                    case 'addStudent':
                        $('#student_name').val('')
                        $('#age').val('')
                        $('#sex').val('')
                        $('#id-card-num').val('')
                        $('#phone-number').val('')
                        layer.open({
                            type: 1,
                            area: '500px',
                            content: $('#add-student-form') 
                        });
                        break;
                };
            });

            $('#student-info-submit').click(function() {
                const student_name = $('#student_name').val()
                const age = $('#age').val()
                const sex = $('#sex').val()
                const id_card_num = $('#id-card-num').val()
                const phone_number = $('#phone-number').val()
                
                $.ajax({
                    url: 'http://120.78.172.212:7001/api/v1/student/create/chenliangji',
                    type: 'POST',
                    data: {
                        student_name,
                        age,
                        sex,
                        id_card_num,
                        phone_number
                    },
                    success: function(res) {
                        console.log(res)
                        if(res.success) {
                            layer.closeAll();
                            layer.msg('提交成功');
                            table.reload('demo')
                        }
                    },
                    error: function(err) {
                        console.log(err)
                    }
                })
            })
        });
    </script>
</body>

</html>